<template>
  <vxe-grid ref="table" v-bind="gridOptions" v-on="gridEvents">
    <template #option="{ row }">
      <template class="table-option">
        <vxe-button status="primary" content="编辑"
                    @click="editRowEvent(row)"/>
        <vxe-button status="warning" content="权限设置"
                    @click="authRowEvent(row)"/>
        <vxe-button status="warning" content="菜单设置"
                    @click="menuRowEvent(row)"/>
        <vxe-button status="danger" content="删除"
                    @click="deleteRowEvent(row)"/>
      </template>
    </template>
  </vxe-grid>
  <RoleEdit ref="edit" @ok="saveSuccess"/>
  <RolePermissionEdit ref="rolePermissionEdit"/>
  <RoleMenuEdit ref="roleMenuEdit"/>
</template>

<script>
import {getPageRole, deleteRoleByCode} from "@/api/sys/role";
import {getDict} from "@/util";
import RoleEdit from "./SysRoleEdit.vue";
import RolePermissionEdit from "./SysRolePermissionEdit.vue";
import RoleMenuEdit from "./SysRoleMenuEdit.vue";
import {Message} from "view-ui-plus";
import {RESPONSE_CODE_SUCCESS} from "@/constant/response";

export default {
  name: "SysRoleMgr",
  components: {RolePermissionEdit, RoleEdit, RoleMenuEdit},
  data() {
    return {
      yesNoDict: undefined,
      gridOptions: {
        toolbarConfig: {
          buttons: [
            {code: 'add', name: '新增'}
          ],
        },
        pagerConfig: {
          pageSize: 10
        },
        columns: [
          {type: 'seq', width: 60},
          {field: 'code', title: '角色编码'},
          {field: 'name', title: '角色名称'},
          {field: 'roleStatus', title: '状态', formatter: this.formatterYesNoDict},
          {field: 'remark', title: '备注'},
          {title: '操作', width: 350, slots: {default: 'option'}}
        ],
        formConfig: {
          items: [
            {field: 'likeName', title: '名称：', span: 6, itemRender: {name: 'input'}},
            {field: 'likeCode', title: '编码：', span: 6, itemRender: {name: 'input'}},
            {itemRender: {name: '$button', props: {content: '查询', type: 'submit', status: 'primary'}}},
            {itemRender: {name: '$button', props: {content: '重置', type: 'reset'}}}
          ]
        },
        proxyConfig: {
          ajax: {
            query: ({page, form}) => {
              return getPageRole({
                pageIndex: page.currentPage,
                pageSize: page.pageSize,
                ...form
              })
            }
          }
        },
      },
      gridEvents: {
        toolbarButtonClick: this.toolbarButtonClick,
      },
    }
  },
  created() {
    getDict("YesNo:EnableDisable").then(res => {
      this.yesNoDict = res
      this.$refs.table.commitProxy('reload')
    })
  },
  methods: {
    deleteRowEvent(row) {
      this.$Modal.confirm({
        title: '删除子角色',
        content: '确认删除角色?<br/> 名称:' + row.name + '<br/>编码:' + row.code,
        okText: '删除',
        onOk: () => {
          deleteRoleByCode({
            roleCode: row.code
          }).then(res => {
            if (res.code == RESPONSE_CODE_SUCCESS) {
              this.$refs.table.commitProxy('reload')
              Message.success("删除成功")
            }
          })
        }
      })
    },
    menuRowEvent(row) {
      this.$refs.roleMenuEdit.show({
        roleCode: row.code,
        roleName: row.name
      })
    },
    authRowEvent(row) {
      this.$refs.rolePermissionEdit.show({
        roleCode: row.code,
        roleName: row.name
      })
    },
    editRowEvent(row) {
      this.$refs.edit.show({
        title: "修改角色",
        data: this.$utils.clone(row)
      })
    },
    toolbarButtonClick({code}) {
      switch (code) {
        case 'add': {
          this.$refs.edit.show({
            title: "添加角色"
          })
          return;
        }
        default: {
          return
        }
      }
    },
    saveSuccess() {
      this.$refs.table.commitProxy('reload')
    },
    formatterYesNoDict({cellValue}) {
      if (this.yesNoDict) {
        return this.yesNoDict.dataMap.get(cellValue).name
      }
      return cellValue
    }
  }
}
</script>

<style lang="less" scoped>

</style>
